<template>
  <div class="game-ranking">
    <head-info>
      <template #left>
        <div class="left"><i class="fa fa-bar-chart"></i> 游戏排行榜</div>
      </template>
      <template #right>
        <button class="myBtn">
          <a
            href="https://www.ali213.net/paihb.html"
            style="color: #fff"
            target="_blank"
            >查看更多</a
          >
        </button>
      </template>
    </head-info>
    <div class="ranking-box">
      <div class="leftOption">
        <left-options @changeOptions="handleOptionChanged" />
      </div>
      <div class="rankingList">
        <ranking-list :rankingList="rankingData.currentRanking" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import headInfo from "@/components/home/headInfo.vue";
import leftOptions from "@/components/home/gameRanking/leftOptions.vue";
import rankingList from "@/components/home/gameRanking/rankingList.vue";
import { getGameRanking } from "@/service/youxiaData";
const rankingData = reactive({
  allRanking: [],
  currentRanking: [],
  loading: false,
});
onMounted(() => {
  getGameRankingData();
});

// 根据用户选择更改选择年份排行
const handleOptionChanged = (index) => {
  rankingData.currentRanking = rankingData.allRanking[index];
};

// 获取排行榜总数据
const getGameRankingData = async () => {
  rankingData.loading = true;
  const res = await getGameRanking();
  rankingData.allRanking = res.data;
  rankingData.currentRanking = rankingData.allRanking[0];
  rankingData.loading = false;
};
</script>

<style scoped lang="less">
.game-ranking {
  width: 65%;
  .ranking-box {
    display: flex;
  }
  .myBtn {
    width: 100px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    height: 25px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    background-image: linear-gradient(
      to right,
      #667eea,
      #764ba2,
      #6b8dd6,
      #8e37d7
    );
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
    border-radius: 50px;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    &:hover {
      background-position: 100% 0;
      -o-transition: all 0.4s ease-in-out;
      -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
    }
  }
}
</style>
